// 入口文件
import Vue from "vue"

import app from "./App.vue"

//导入mint-ui
/*import { Header,Swipe, SwipeItem,Button,Lazyload } from 'mint-ui';
import 'mint-ui/lib/style.css'
//头部
Vue.component(Header.name,Header)
//轮播图
Vue.component(Swipe.name,Swipe)
Vue.component(SwipeItem.name,SwipeItem)
//按钮
Vue.component(Button.name,Button)

Vue.use(Lazyload);*/
//为了在加载图片时有加载的样式效果
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'

//导入vue-resource
import VueResource from "vue-resource"
Vue.use(VueResource)

//导入mui
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'
import  './lib/mui/fonts/mui-icons-extra.ttf'

//导入路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import router from './router.js'
//设置路由时，项目域名
Vue.http.options.root = 'http://www.liulongbin.top:3005';
//设置post请求，表单的application/x-www-form-urlencoded MIME typ
Vue.http.options.emulateJSON = true;

//导入moment--格式化时间插件
import moment from 'moment'

Vue.filter('dateFormat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
    return moment(dataStr).format(pattern)

})


//导入缩略图
import VuePreview from 'vue2-preview'
Vue.use(VuePreview)

//导入vue-x
import VueX from "vuex"
Vue.use(VueX) //初始化VueX,调用vuex的install方法


//获得购物车数据

var carsData = JSON.parse(localStorage.getItem("car") || "[]")

//创建store实例
var store = new VueX.Store({
    //类似于vue中的data
    state: { // this.$store.state.变量名
        //购物车：{id:商品id，num:数量，price:单价，selected:是否选中}
        car: carsData,
        //购物车中商品的总数
        totalNum: 0
    },
    //类似于vue中的方法
    mutations:{  //   this.$store.commit('方法名');
        //组件中调用该方法，将商品对象添加到全局变量car中
        add2Car(state,goodsInfo){

            var flag = false;
            //处理相同商品的情况
            state.car.some(item => { //some,找到一个就返回  打call,减少循环了
                if(item.id === goodsInfo.id){//如果包含，只改数量,由于是引用传递
                    item.num += parseInt(goodsInfo.num);
                    flag = true;
                    return true;
                }
            })

            if(!flag){
                state.car.push(goodsInfo);
            }

            //例子中是把当前购物车放在本地存储  localStorage中，里面存的是json串
            //正常情况应该提交到后台，每次进来再重新获取
            localStorage.setItem("car",JSON.stringify(state.car));

        },

        //在购物车栏，选择商品数量，需要更新到storage里面
        //obj={id:商品的id，num：购物车中选中的商品数量}
        updateGoodsTotal(state,obj){
            // debugger;
            var flag = false;
            state.car.forEach(item => {
                if(item.id == obj.id){
                    flag = true;
                    item.num = obj.num;
                    return;
                }
            });
            //把更新后的值重新放到storage中
            if(flag) {
                localStorage.setItem("car", JSON.stringify(state.car));

            }
        },

        updateGoodsIsSelected(state,id){
            var flag = false;
            state.car.forEach(item=>{
                if(item.id == id){
                    item.selected = !item.selected;
                    flag = true;
                    return;
                }
            });


            if(flag){
                localStorage.setItem("car", JSON.stringify(state.car));
            }

        },

        //删除storage中的数量
        delGoods(state,id){
            var flag = state.car.some((item, i) => {
                if (item.id == id) {
                    state.car.splice(i, 1)
                    return true;
                }
            })
            if(flag){
                localStorage.setItem("car", JSON.stringify(state.car));
                //重新刷新一遍购物车
                this.car = JSON.parse(localStorage.getItem("car") || "[]");
            }
        }
        //计算购物车中商品的总数
        /*calcTotal(state){

        }*/
    },
    //类似于vue中的运算属性
    getters:{
        //计算购物车中商品的总数
        calcTotal(state){
            var total = 0;
            state.car.forEach(item=>{
                total += parseInt(item.num);
            })
            return total;
        },
        //根据id获取当前商品的总数
        getCurrentTotalById:(state)=>(id)=>{
            var num = 0;
            state.car.forEach(item=>{
                if(item.id == id){
                    num =  item.num;
                }
            })
            return num;
        },
        //根据id获取当前商品是否选中
        isSelected:(state)=>(id)=>{
            // debugger;
            var flag = false;
            state.car.forEach(item=>{
                if(item.id == id){
                    flag =  item.selected;
                }
            })
            return flag;
        },


        //获得数组集合
        allSelectd(state){
            var o = {}
            state.car.forEach(item => {
                o[item.id] = item.selected
            })
            return o
        },

        //计算已勾选商品数量和金额
        getSelectedObj(state){
            var totalNum = 0;
            var totalMoney = 0;
            state.car.forEach(item=>{
                if(item.selected){
                    totalNum += parseInt(item.num);
                    totalMoney += parseFloat(item.num * item.price);
                }
            })

            return {
                totalNum:totalNum,
                totalMoney:totalMoney
            }
        }


    }
})


var vue = new Vue({
    el: "#app",
    render: c => c(app),
    router,
    //绑定vue-x到vue中
    store
});